<template>
  <div class="mainCon">
    <div class="containercontent">
      <div class="separaterowTable" style="height:100%;">
        <div class="tableTittle">
          <div><span class="fontImpact">1</span><span>仪器列表</span></div>
        </div>
        <el-table :data="mainEquipTableData" style="width: 100%;height:calc(50% - 50px);" size="mini" class="tableCon" ref="singleTable" highlight-current-row
          @current-change="handleCurrentChangeMain">
          <el-table-column label="序号" min-width="50px">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column property="name" label="名称" min-width="100px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="model" label="型号" min-width="100px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="enterCode" label="设备编号" min-width="100px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="仪器状态" min-width="100px">
            <template slot-scope="scope">
              待校准
            </template>
          </el-table-column>
        </el-table>
        <div  style="height:50%;" v-if="checkShow">
          <check-record :checkRecordData="detailData" flag="edit"></check-record>
        </div>

      </div>
    </div>
    <div v-if="eqDetailShow">
      <instrument-detail :eqType="eqType" :eqEditOrNew="eqEditOrNew" :detailType="eqDetailShowType"></instrument-detail>
    </div>
    <div v-if="daochuShow">
      <daochu-detail></daochu-detail>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import checkRecord from './instrumentPage/detailDialogPage/checkRecord' //检定校准记录
  const daochuDetail = () => import('./children/daochuDetail.vue');
  export default {
    data() {
      let that = this;
      return {
        checkShow: true,
        mainEquipTableData: [],
        detailData: {},
        enableStatusValue: '3',
        methodCategoryValue: '',
        methodTypeValue: '',
        searchName: '',
        sampleTypeValue: '',
        currentPage: 1,
        frontEquipTypeValue: '',
        mainEquipTypeValue: '',
        //主仪器列表选中行
        currentRowMain: null,
        //辅助仪器列表选中行
        currentRowFront: null,
        eqDetailShow: false,
        //表示仪器详细信息显示权限
        eqDetailShowType: 'jianding',
        //仪器详情中，是主仪器还是辅助仪器
        eqType: 'main',
        //仪器详情中，是新增仪器还是编辑仪器
        eqEditOrNew: '',
        daochuShow: false,
      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightB', 'mainEquipType', 'frontEquipType', 'frontEquipTableData']),
    },
    mounted() {
      this.readMaintenanceList()
    },
    watch: {

    },
    props: ["userOpernation"],
    components: {
      daochuDetail, checkRecord
    },
    methods: {
      readMaintenanceList() {
        this.$http({
          method: 'post',
          apiUrl: 'resource/readMaintenanceList.htm',
          params: { maintainType: 'MA02' },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {

            this.mainEquipTableData = res.data;
            this.setCurrent(this.mainEquipTableData[0])
          } 
        }, )
      },
      handleCurrentChangeMain: function (val) {
        this.currentRowMain = val;

        //		      this.detailData = val 
        this.setCurrent(val)
      },
      setCurrent(row) {
        console.log(row)
        if (!!row) {
          this.$refs.singleTable.setCurrentRow(row);
          this.detailData = row
          this.checkShow = false
          this.$nextTick(() => {
            this.checkShow = true
          })
        }else{
          this.detailData = {}
          this.checkShow = false
          this.$nextTick(() => {
            this.checkShow = true
          })
        }
      },
      editMaintEquipe: function (row) {

      },
      editFrontEquip: function (row) {

      },
      changeFrontEquipStatus: function (row) {
        console.log(row);
      },

      handleCurrentChangeFront: function (val) {
        this.currentRowFront = val;
      },
      changeMainEquipStatus: function (row) {
        console.log(row);
      },
      handleSizeChange: function () {

      },
      handleCurrentChange: function () {

      },
      showEqDetail: function (type, edornew, detailType) {
        this.eqType = type;
        this.eqDetailShow = true;
        this.eqEditOrNew = edornew;
        this.eqDetailShowType = detailType;
      },
      daochu: function () {

        this.daochuShow = true;
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*.infoitem{
  width:calc((100% - 200px)/4);
}*/
  /*.infoitem:nth-child(1){
  width: 110px;
}*/

  .separaterow {
    margin-top: 10px;
  }

  .informationItem {
    width: calc(100% - 70px);
    float: right;
  }
</style>